<template>
	<view class="dynamic-form">
		<!--  可配置区域 -->
		<view class="dynamic-form-data">
			<view v-for="(field, index) in feildData" :key="index" class="dynamic-form-item">
				<view v-if="field.isShow === null || field.isShow === undefined || field.isShow" class="dynamic-form-item__row">
					<view class="dynamic-form-item__label">
						<uni-text>{{ field.label }}</uni-text>
						<uni-text v-if="field.required" class="required">*</uni-text>
					</view>
					<view class="dynamic-form-item__desc">
						<DynamicField :fieldKey="field.key" :formData="formData" :field="field" :isEdit="isEdit"
							@update-form-data="updateFormData" />
					</view>
				</view>
				<view v-if="(field.isShow === null || field.isShow === undefined || field.isShow) && errors[field.key]" class="dynamic-form-item__error">
					<text class="error">{{ errors[field.key] }}</text>
				</view>
			</view>
			<!-- <view class="dynamic-form-item">
				<view class="example-body">
					<uni-file-picker 
						title="上传附件" 
						limit="9" 
						fileMediatype="image" 
						mode="grid" 	
						readonly
						v-model="imageList" 
						modelValue="imageList"
						:auto-upload="false" 
						:sizeType="sizeType"
						/> 					 
				</view> -->
			<!-- </view> -->
		</view>

		<!-- 底部操作按钮 -->
		<view class="flex flex-wrap diygw-col-24 flex-direction-column diygw-bottom">
			<view class="flex diygw-col-24">
				<button style="color: #fbf7f7 !important" @tap="navigateTo" data-type="page" data-url="/pages/index"
					class="diygw-btn gradual-blue radius-xl flex-sub margin-xs button-button-clz">取消</button>
				<button @click="onSave"
					class="diygw-btn cyan radius-xl flex-sub margin-xs button-button-clz">保存</button>
			</view>
		</view>
	</view>
</template>

<script>
	import DynamicField from '@/components/fields/DynamicField.vue';
	import feilddata from '@/common/data/cash/cashFeilddata.js';
	import dataDictionary from '@/common/data/dataDictionary.js';

	export default {
		components: {
			DynamicField,
		},
		data() {
			return {
				isEdit: true, // 是否为编辑模式，false 为查看模式
				feildData : feilddata,
				formData: {},
				dataDictionary: dataDictionary.petty_cash, //数据字典
			}
		},
		onLoad(option) {
			if (option.formData) {
				this.formData = JSON.parse(option.formData);
				this.updateFlag = true;
			}
			if (this.feildData) {
				for (let i = 0; i < this.feildData.length; i++) {
					let obj = this.feildData[i];
					if (this.dataDictionary[obj.key]) {
						obj.options = this.dataDictionary[obj.key];
					}
				}
			}
		},
		methods: {
			updateFormData(key,newFormData) {
				if (this.formData[key] == newFormData[key]) {
					return;
				}
				console.log("修改前的值======" + key + ":", this.formData[key])
				this.formData = newFormData; // 更新父组件的值
				console.log("修改后的值======" + key + ":", this.formData[key])
				if (!this.feildData) {
					return;
				}
				for (let i = 0; i < this.feildData.length; i++) {
					let obj = this.feildData[i];
					if (!obj.relations || !obj.relations[key]) {
						continue;
					}
					if (!obj.relations[key].includes(this.formData[key])) {
						obj.isShow = false;
					} else {
						obj.isShow = true;
						// 更新描述
						obj.label = obj.labelDynamic[key][this.formData[key]];
					}
				}
			},
			
			// 保存
			async onSave() {
				if (!this.formData.id) {
					this.formData.createdAt = new Date();
				}
				this.formData.updatedAt = new Date()
				this.$api.pettyCashSave(this.formData).then(result => {
					if (result) {
						// 成功处理
						uni.showToast({
							title: "保存成功",
							icon: "success",
							duration: 3000,
							complete: () => {
								// Toast关闭后执行
								uni.navigateBack({
									delta: 1 // 返回上一页
								})
							}
						});
					} else {
						// 失败进行的操作
						uni.showToast({
							title: "保存失败!",
							duration: 3000
						});
					}
				}).catch(res => {
					// 失败进行的操作
					uni.showToast({
						title: "保存失败!",
						duration: 3000
					});
					return;
				})
			},
			// 取消
			onCancel() {
				uni.navigateBack();
			},
		}
	}
</script>

<style lang="less" scoped>
	@import url("@/common/css/dynamic-form.less");
</style>